@charset "utf-8";
$width:640px;
$height:1136px;
@function w($w){
    @return $w/$width*100%;
}
@function h($h){
    @return $h/$height*100%;
}
    //*******************首页的内容****************************
.shouye{
    width: 100%;
    height: 100%;
    position: relative;
    background: url(../images/bg1.png) no-repeat;
    background-size: 100%;
    .bg{
        width: 100%;
        position: absolute;
        z-index: -1;
    }
    .img-kugou{
        width:w(103px);
        position: absolute;
        left: w(44px);
        top:  h(44px);
    }
    .img-t1{
        width:w(380px);
        position: absolute;
        left: w(126px);
        top: h(162px);
    }
    .img-t2{
        width:w(568px);
        position: absolute;
        left: w(23px);
        top: h(217px);
    }
    .img-t3{
        width:w(350px);
        position: absolute;
        left: w(148px);
        top: h(364px);
    }
    .img-t4{
        width:w(342px);
        position: absolute;
        left: w(154px);
        top: h(439px);
    }
    .img-yun1{
        width:w(78px);
        position: absolute;
        left: w(41px);
        top: h(403px);
    }
    .img-yun2{
        width:w(55px);
        position: absolute;
        left: w(524px);
        top: h(435px);
    }
    .img-yun3{
        width:w(55px);
        position: absolute;
        left: w(459px);
        top: h(542px);
    }
    .img-yun4{
        width:w(37px);
        position: absolute;
        left: w(474px);
        top: h(633px);
    }
    .img-yun5{
        width:w(55px);
        position: absolute;
        left: w(533px);
        top: h(610px);
    }
    .img-yueqiu{
        width:w(175px);
        position: absolute;
        left: w(404px);
        top: h(510px);
    }
    .img-qipao1{
        position: absolute;
        width:w(93px);
        left: w(48px);
        top: h(647px);
    }
    .img-qipao1{
        position: absolute;
        width:w(93px);
        left: w(48px);
        top: h(647px);
    }
    .img-qipao2{
        position: absolute;
        width:w(150px);
        left: w(447px);
        top: h(657px);
    }
    .img-qipao3{
        position: absolute;
        width:w(128px);
        left: w(34px);
        top: h(900px);
    }
    .img-qipao4{
        position: absolute;
        width:w(93px);
        left: w(492px);
        top: h(887px);
    }
    .img-people1{
        position: absolute;
        width:w(333px);
        left: w(141px);
        top: h(570px);
    }
     .img-input1{
        position: absolute;
        width:w(170px);
        left: w(232px);
        top: h(1004px);
    }
}
//**********************内容公共内类****************************

.pages{
    width: 100%;
    height: 100%;
    position: relative;
    background: url(../images/bg1.png) no-repeat;
    background-size: 100%;

    .img-yun1{
        width:w(112px);
        position: absolute;
        left: w(33px);
        top: h(480px); 
    }
    .img-yun2{
        width:w(63px);
        position: absolute;
        left: w(452px);
        top: h(492px); 
    }
    .img-yun3{
        width:w(112px);
        position: absolute;
        left: w(563px);
        top: h(446px); 
    }
     .img-yun4{
        width:w(60px);
        position: absolute;
        left: w(390px);
        top: h(460px); 
    }
    .img-yun5{
        width:w(60px);
        position: absolute;
        left: w(195px);
        top: h(420px); 
    }
    .input{
        width: w(368px);
        height: h(65px);
        position: absolute;
        p{
            padding-left: 15px;
            padding-top: 7px;
            color:#000000;
            font-size:13px;
        }
    }
    @media screen and (min-width:300px) and (max-width:375px){
    .input p {
        padding-top: 7px;
        padding-left: 19px;
        color:#000000;
        font-size:14px;
        letter-spacing: -1px;
    }
    
}
 @media screen and (min-width:300px) and (max-width:360px){
    .input p {
        padding-top: 5px;
        padding-left: 19px;
        color:#000000;
        font-size:14px;
        letter-spacing: -1px;
    }
    
}
@media screen and (min-width:300px) and (max-width:320px){
    .input p {
        padding-top: 5px;
        padding-left: 19px;
        color:#000000;
        font-size:12px;
        letter-spacing: -1px;
    }
    
}

@media screen and (min-width:414px){
    .input p {
        padding-top: 7px;
        padding-left: 19px;
        color:#000000;
        font-size:14px;
    }
}
    @media screen and (min-width:768px){
    .input p {
        padding-top: 12px;
        padding-left: 19px;
        color:#000000;
        font-size:21px;
    }
}
    .input-1{
        left: w(55px);
        top: h(682px);
        background: url(../images/input-2_22.png) no-repeat;
        background-size: contain;   
    }
    .input-2{
        left: w(55px);
        top: h(772px);
        background: url(../images/input-2_22.png) no-repeat;
        background-size: contain;   
    }
    .input-3{
        left: w(55px);
        top: h(862px);
        background: url(../images/input-2_22.png) no-repeat;
        background-size: contain;   
    }
    .input-4{
        left: w(55px);
        top: h(952px);
        background: url(../images/input-2_22.png) no-repeat;
        background-size: contain;   
    }
    .img-music-1{
        width:w(80px);
        position: absolute;
        left: w(535px);
        top: h(725px); 
    }
    .img-music-2{
        width:w(40px);
        position: absolute;
        left: w(580px);
        top: h(840px); 
    }
    .img-music-3{
        width:w(40px);
        position: absolute;
        left: w(576px);
        top: h(908px); 
    }
    .img-music-4{
        width:w(46px);
        position: absolute;
        left: w(556px);
        top: h(958px); 
    }
    .img-music-5{
        width:w(52px);
        position: absolute;
        left: w(558px);
        top: h(1006px); 
    }
     .img-dog-1{
        width:w(83px);
        position: absolute;
        left: w(477px);
        top: h(963px); 
    }
    input{
        display: none;
    }
    input[name="input-1"]:checked ~.input-1{
         background: url(../images/input-1_12.png) no-repeat;
         background-size: contain;
    }
     input[name="input-2"]:checked ~.input-2{
         background: url(../images/input-1_12.png) no-repeat;
         background-size: contain;
    }
     input[name="input-3"]:checked ~.input-3{
         background: url(../images/input-1_12.png) no-repeat;
         background-size: contain;
    }
     input[name="input-4"]:checked ~.input-4{
         background: url(../images/input-1_12.png) no-repeat;
         background-size: contain;
    }

}
//**********************内容-1的内容****************************
.page-1{

    .page1{
        width: 100%;
        position: absolute;
        top: h(104px);
        p{
            text-align: center;
            color: #ffffff;
            font-size: 16px;
        }
    }
    .img-people2{
        width:w(250px);
        position: absolute;
        top: h(180px);
        left: 50%;
        transform: translateX(-50%);
       
    }
 

}
//**********************内容-2的内容****************************
.page-2{
 
    .page1{
        width: w(496px);
        position: absolute;
        left: w(45px);
        top: h(98px); 
 
 
    }
    .img-people2{
        width:w(211px);
        position: absolute;
        top: h(274px);
        left: 50%;
        transform: translateX(-50%);
       
    }
 
}
//**********************内容-3的内容****************************
.page-3{

    .page1{
        width: w(496px);
        position: absolute;
        left: w(45px);
        top: h(98px); 
 
 
    }
    .img-people2{
        width:w(336px);
        position: absolute;
        left:w(136px);
        top: h(266px);
       
    }
   
}
//**********************内容-4的内容****************************
.page-4{

    .page1{
        width: w(496px);
        position: absolute;
        left: w(45px);
        top: h(98px); 
 
 
    }
    .img-people2{
        width:w(244px);
        position: absolute;
        left:w(208px);
        top: h(326px);
       
    }
  
}
//**********************内容-5的内容****************************
.page-5{
   
    .page1{
        width: w(496px);
        position: absolute;
        left: w(45px);
        top: h(98px); 
 
 
    }
    .img-people2{
        width:w(350px);
        position: absolute;
        left:w(148px);
        top: h(264px);
       
    }
   
}
//**********************内容-6的内容****************************
.page-6{
   
    .page1{
        width: w(496px);
        position: absolute;
        left: w(45px);
        top: h(98px); 
 
 
    }
    .img-people2{
        width:w(337px);
        position: absolute;
        left:w(156px);
        top: h(248px);
       
    }
  
}
//**********************内容-7的内容****************************
.page-7{
   
    .page1{
        width: w(496px);
        position: absolute;
        left: w(45px);
        top: h(98px); 
 
 
    }
    .img-people2{
        width:w(337px);
        position: absolute;
        left:w(156px);
        top: h(248px);
       
    }
   
}
//**********************内容-8的内容****************************
.page-8{
  
    .page1{
        width: w(496px);
        position: absolute;
        left: w(45px);
        top: h(98px); 
 
 
    }
    .img-people2{
        width:w(251px);
        position: absolute;
        left:w(203px);
        top: h(177px);
       
    }
  
}
//**********************内容-9的内容****************************
.page-9{
  
    .page1{
        width: w(496px);
        position: absolute;
        left: w(45px);
        top: h(98px); 
 
 
    }
    .img-people2{
        width:w(251px);
        position: absolute;
        left:w(203px);
        top: h(177px);
       
    }
 
}
//**********************内容-10的内容****************************
.page-10{
  
    .page1{
        width: w(460px);
        position: absolute;
        left: w(45px);
        top: h(98px); 
 
 
    }
    .img-people2{
        width:w(254px);
        position: absolute;
        left:w(200px);
        top: h(227px);
       
    }
 
}
//**********************内容-11的内容****************************
.page-11{
  
    .page1{
        width: w(400px);
        position: absolute;
        left: w(45px);
        top: h(98px); 
 
 
    }
    .img-people2{
        width:w(252px);
        position: absolute;
        left:w(202px);
        top: h(181px);
       
    }
 
}
//**********************内容-12的内容****************************
.page-12{
  
    .page1{
        width: w(494px);
        position: absolute;
        left: w(45px);
        top: h(98px); 
 
 
    }
    .img-people2{
        width:w(320px);
        position: absolute;
        left:w(146px);
        top: h(218px);
       
    }
 
}
//**********************内容-13的内容****************************
.page-13{
  
    .page1{
        width: w(360px);
        position: absolute;
        left: w(45px);
        top: h(98px); 
 
 
    }
    .img-people2{
        width:w(252px);
        position: absolute;
        left:w(201px);
        top: h(229px);
       
    }
 
}
//**********************内容-14的内容****************************
.page-14{
  
    .page1{
        width: w(491px);
        position: absolute;
        left: w(45px);
        top: h(98px); 
 
 
    }
    .img-people2{
        width:w(252px);
        position: absolute;
        left:w(201px);
        top: h(286px);
       
    }
 
}
//**********************内容-15的内容****************************
.page-15{
  
    .page1{
        width: w(420px);
        position: absolute;
        left: w(45px);
        top: h(98px); 
 
 
    }
    .img-people2{
        width:w(282px);
        position: absolute;
        left:w(184px);
        top: h(188px);
       
    }
 
}
//**********************内容-16的内容****************************
.page-16{
  
    .page1{
        width: w(421px);
        position: absolute;
        left: w(45px);
        top: h(98px); 
 
 
    }
    .img-people2{
        width:w(332px);
        position: absolute;
        left:w(145px);
        top: h(202px);
       
    }
 
}
//**********************内容-17的内容****************************
.page-17{
  
    .page1{
        width: w(505px);
        position: absolute;
        left: w(45px);
        top: h(98px); 
 
 
    }
    .img-people2{
        width:w(354px);
        position: absolute;
        left:w(152px);
        top: h(228px);
       
    }
 
}
//**********************内容-18的内容****************************
.page-18{
  
    .page1{
        width: w(392px);
        position: absolute;
        left: w(45px);
        top: h(98px); 
 
 
    }
    .img-people2{
        width:w(252px);
        position: absolute;
        left:w(202px);
        top: h(224px);
       
    }
 
}
//**********************内容-19的内容****************************
.page-19{
  
    .page1{
        width: w(400px);
        position: absolute;
        left: w(45px);
        top: h(98px); 
 
 
    }
    .img-people2{
        width:w(228px);
        position: absolute;
        left:w(200px);
        top: h(226px);
       
    }
 
}
//**********************内容-20的内容****************************
.page-20{
  
    .page1{
        width: w(392px);
        position: absolute;
        left: w(45px);
        top: h(98px); 
 
 
    }
    .img-people2{
        width:w(252px);
        position: absolute;
        left:w(200px);
        top: h(196px);
       
    }
 
}
//**********************内容-21的内容****************************
.page-21{
  
    .page1{
        width: w(334px);
        position: absolute;
        left: w(45px);
        top: h(98px); 
 
 
    }
    .img-people2{
        width:w(296px);
        position: absolute;
        left:w(180px);
        top: h(182px);
       
    }
 
}
//**********************内容-22的内容****************************
.page-22{
  
    .page1{
        width: w(452px);
        position: absolute;
        left: w(45px);
        top: h(98px); 
 
 
    }
    .img-people2{
        width:w(377px);
        position: absolute;
        left:w(138px);
        top: h(235px);
       
    }
    .input{
        text-align: center;
    }
 
}





